<template>
    <figure class="figure">
        <div class="avator-block">
            <div>
                <img width="50px" height="50px" :src="imgSrc">
                <p style="margin:0 10px;display:inline-block;height:50px;line-height:50px;vertical-align:top">{{ item.userName }}</p>
                <span style="display:inline-block;height:50px;line-height:50px;vertical-align:top">{{ creatTime }}</span>
            </div>
            <div style="line-height:55px">
                <Icon 
                    type="md-arrow-dropright-circle" 
                    size="24"
                    class="player icon" 
                    @click="toPlayer"
                />
                <span>{{ item.partName }}</span>
            </div>
        </div>
        <div>{{ item.content }}</div>
        <div class="edit-del-block">
            <span @click="editNotes"><Icon type="ios-card-outline" />编辑</span>
            <span @click="delNotes" style="margin-left:30px"><Icon type="ios-trash-outline" />删除</span>
        </div>
    </figure>
</template>

<script>
import { formatData } from '@/utils/format';
import { domain } from '@/utils/host';
export default {
    name:"noteList",
    props:['item'],
    computed:{
        imgSrc(){
            return  `${domain}/fdl/preImages/${this.item.headerPath}`
        },
        creatTime(){
            return formatData(this.item.create_time)
        },
    },
    methods:{
        editNotes(){
            this.$emit("editCurrentNotes",{
                content:this.item.content,
                description:this.item.description,
                name:this.item.name,
                note_id:this.item.note_id,
                video_id:this.item.video_id,
                watch_point:this.item.watch_point
            })
        },
        delNotes(){
            this.$emit("delCurrentNotes",this.item.note_id)
        },
        toPlayer(){
            document.getElementById("video").pause()
            window.scrollTo(0,0)
            setTimeout(() => {
                if(document.getElementById("video").paused){
                    document.getElementById("video").play()
                    document.getElementById("video").currentTime = this.item.watch_point
                }
            },60) 
        }
    },
}
</script>

<style lang="scss" scoped>
    .figure{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom:1px solid rgba(217,219,221,1);

        .avator-block{
            display: flex;
            justify-content: space-between;
            font-size:12px;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .edit-del-block{
            margin-top:20px;
            font-size:12px;
            font-weight:400;
            color:rgba(153,153,153,1);
            span{
                cursor: pointer;
            }
        }

        .player{
            vertical-align: middle;
            color: #000;
        }
    }
</style>